<template>
  <header class="bg-gradient-dark">
    <div class="page-header min-vh-75"
         style="background-image: url('https://static.liushaofeng.cn/img/bg9.jpg'); transform: translate3d(0px, 0px, 0px);">
      <span class="mask bg-gradient-dark opacity-6"></span>
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center mx-auto my-auto">
            <h1 class="text-white">读 <span class="text-white" id="typed">书破万卷，下笔如有神</span><span
                    class="typed-cursor typed-cursor--blink">|</span></h1>
            <div id="typed-strings" style="display: none;">
              <h1>书破万卷，下笔如有神</h1>
              <h1>万卷书，行万里路</h1>
              <h1>书百遍，其义自见</h1>
            </div>
            <p class="lead mb-4 text-white opacity-8">We’re constantly trying to express ourselves and actualize our
              dreams. If you have the opportunity to play this game</p>
            <button type="submit" class="btn bg-white text-dark">Create Account</button>
            <h6 class="text-white mb-2 mt-5">这样联系我</h6>
            <div class="d-flex justify-content-center">
              <a href="javascript:;"><i class="fab fa-weixin text-lg text-white ms-2 me-2" aria-hidden="true"
                   data-bs-toggle="tooltip" data-bs-placement="bottom" title="lwx166646" data-container="body"
                   data-animation="true"></i></a>
              <a href="tencent://message/?uin=846908418&Site=&Menu=yes" data-bs-toggle="tooltip"
                 data-bs-placement="bottom" title="846908418" data-container="body" data-animation="true"><i
                   class="fab fa-qq text-lg text-white ms-2 me-2" aria-hidden="true"></i></a>
              <a href="https://github.com/liushaofeng89" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" title="liushaofeng89"
                 data-container="body" data-animation="true"><i class="fab fa-github text-lg text-white ms-2 me-2"
                   aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "Header",
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>